@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            库存管理
            <small>商品库存查询</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
            <li><a href="#">库存管理</a></li>
            <li class="active">库存查询</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">商品库存列表</h3>
                        <div class="box-tools">
                            <button type="button" class="btn btn-primary" onclick="RefreshStock()">
                                <i class="fa fa-refresh"></i> 刷新库存
                            </button>
                            <button type="button" class="btn btn-success" onclick="ExportStock()">
                                <i class="fa fa-download"></i> 导出库存
                            </button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="goodsCode">商品编码：</label>
                                    <input type="text" class="form-control" id="goodsCode" placeholder="请输入商品编码">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="goodsName">商品名称：</label>
                                    <input type="text" class="form-control" id="goodsName" placeholder="请输入商品名称">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="specModel">规格型号：</label>
                                    <input type="text" class="form-control" id="specModel" placeholder="请输入规格型号">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div>
                                        <button type="button" class="btn btn-primary" onclick="SearchStock()">
                                            <i class="fa fa-search"></i> 搜索
                                        </button>
                                        <button type="button" class="btn btn-default" onclick="ClearSearch()">
                                            <i class="fa fa-eraser"></i> 清空
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div id="stock-table" class="avue-crud" ref="crud">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>

<script>
    var vm = new Vue({
        el: '#stock-table',
        data: function () {
            return {
                options: {
                    url: '/JxStock/GetStockList',
                    deleteBtn: false,
                    editBtn: false,
                    addBtn: false,
                    viewBtn: false,
                    searchShow: false,
                    columnBtn: true,
                    excelBtn: true,
                    printBtn: true,
                    align: 'center',
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    labelWidth: 120,
                    pagination: true,
                    pageSize: 20,
                    pageSizes: [10, 20, 50, 100],
                    column: [
                        {
                            label: '商品编码',
                            prop: 'GoodsCode',
                            search: false
                        },
                        {
                            label: '商品名称',
                            prop: 'GoodsName',
                            search: false
                        },
                        {
                            label: '规格型号',
                            prop: 'SpecModel',
                            search: false
                        },
                        {
                            label: '单位',
                            prop: 'Unit',
                            search: false
                        },
                        {
                            label: '当前库存',
                            prop: 'CurrentStock',
                            type: 'number',
                            search: false,
                            formatter: function (value, row, index) {
                                // 如果库存不足，显示红色
                                if (row.MinStock > 0 && value < row.MinStock) {
                                    return '<span style="color:red;font-weight:bold;">' + value + '</span>';
                                }
                                return value;
                            }
                        },
                        {
                            label: '最低库存',
                            prop: 'MinStock',
                            type: 'number',
                            search: false
                        },
                        {
                            label: '最高库存',
                            prop: 'MaxStock',
                            type: 'number',
                            search: false
                        },
                        {
                            label: '库存状态',
                            prop: 'StockStatus',
                            search: false,
                            formatter: function (value, row, index) {
                                if (row.MinStock > 0 && row.CurrentStock < row.MinStock) {
                                    return '<span style="color:red;">库存不足</span>';
                                } else if (row.MaxStock > 0 && row.CurrentStock > row.MaxStock) {
                                    return '<span style="color:orange;">库存超标</span>';
                                }
                                return '<span style="color:green;">正常</span>';
                            }
                        },
                        {
                            label: '操作',
                            prop: 'action',
                            width: 150,
                            fixed: 'right',
                            type: 'template',
                            template: function (h, params) {
                                var _this = this;
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: function () {
                                                // 查看库存详情
                                                _this.handleViewDetail(params.row);
                                            }
                                        }
                                    }, '详情'),
                                    h('Button', {
                                        props: {
                                            type: 'info',
                                            size: 'small'
                                        },
                                        on: {
                                            click: function () {
                                                // 库存预警设置
                                                _this.handleSetAlert(params.row);
                                            }
                                        }
                                    }, '预警设置')
                                ]);
                            }
                        }
                    ],
                    success: function (res, type) {
                        // 处理成功回调
                    },
                    handleViewDetail: function (row) {
                        // 查看库存详情，弹出详情模态框
                        vm.$alert(JSON.stringify(row, null, 2), '库存详情', {
                            dangerouslyUseHTMLString: true,
                            confirmButtonText: '确定'
                        });
                    },
                    handleSetAlert: function (row) {
                        // 设置库存预警值
                        vm.$prompt('请设置最低库存预警值：', '库存预警设置', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputPattern: /^\d+(\.\d{1,2})?$/,
                            inputErrorMessage: '请输入有效的数字'
                        }).then(function (data) {
                            var minStock = parseFloat(data.value);
                            axios.post('/JxStock/SetStockAlert', {
                                goodsCode: row.GoodsCode,
                                minStock: minStock
                            }).then(function (res) {
                                if (res.data.Code === 200) {
                                    vm.$message.success(res.data.Message);
                                    vm.$refs.crud.refresh();
                                } else {
                                    vm.$message.error(res.data.Message);
                                }
                            });
                        }).catch(function () {
                            vm.$message.info('已取消设置');
                        });
                    }
                }
            }
        },
        methods: {
            SearchStock: function () {
                // 获取搜索条件
                var goodsCode = document.getElementById('goodsCode').value;
                var goodsName = document.getElementById('goodsName').value;
                var specModel = document.getElementById('specModel').value;
                
                // 构建搜索参数
                var params = {
                    goodsCode: goodsCode,
                    goodsName: goodsName,
                    specModel: specModel
                };
                
                // 更新URL并刷新表格
                this.options.url = '/JxStock/GetStockList?' + this.encodeQuery(params);
                this.$refs.crud.refresh();
            },
            ClearSearch: function () {
                // 清空搜索条件
                document.getElementById('goodsCode').value = '';
                document.getElementById('goodsName').value = '';
                document.getElementById('specModel').value = '';
                
                // 重置URL并刷新表格
                this.options.url = '/JxStock/GetStockList';
                this.$refs.crud.refresh();
            },
            RefreshStock: function () {
                // 刷新库存数据
                this.$refs.crud.refresh();
                this.$message.success('库存数据已刷新');
            },
            ExportStock: function () {
                // 导出库存数据
                window.location.href = '/JxStock/ExportStock';
            },
            encodeQuery: function (data) {
                // 将对象转换为URL查询字符串
                return Object.keys(data)
                    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
                    .join('&');
            }
        },
        mounted: function () {
            // 组件挂载后执行
        }
    });
</script>